<template>
  <div class="page-weather">
    <div class="weather-card">
      <div class="weather-header">
        <h2 class="location">
          <span class="province">{{ weatherInfo.city }}</span>
        </h2>
        <div class="date">{{ fmtYmdW(weatherInfo.reporttime) }}</div>
      </div>

      <div class="weather-content">
        <div class="weather-icon">
          <i class="weather-sunny"></i>
          <span class="weather-desc">{{ weatherInfo.weather }}</span>
        </div>

        <div class="temperature">
          <span class="current-temp">{{ weatherInfo.temperature }}</span>
          <span class="temp-unit">°C</span>
        </div>
      </div>

      <div class="weather-footer">
        <span class="update-time">更新时间: {{ weatherInfo.reporttime }}</span>
        <span class="data-source">数据来源: 高德地图</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref } from 'vue'
import { fmtYmdW } from '@/utils/date'

const mapKey = 'dd21025becb2a3da554de55e8b44dc9c'
// 223.71.40.26  北京的ip
const getLocation = async () => {
  const ip = '223.71.40.26'
  axios.get(`https://restapi.amap.com/v3/ip?key=${mapKey}&ip=${ip}`).then((res) => {
    res.data.adcode && getWeather(res.data.adcode)
  })
}

getLocation()

const weatherInfo = ref({
  city: ''
})
const getWeather = (adcode) => {
  axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?key=${mapKey}&city=${adcode}`).then((res) => {
    weatherInfo.value = res.data?.lives.length && res.data.lives[0]
  })
}
</script>

<style lang="scss" scoped>
.page-weather {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30vh 10px;
  height: 100%;
}
.weather-card {
  width: 900px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  color: white;
  padding: 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.weather-header {
  margin-bottom: 15px;
}

.location {
  margin: 0;
  font-size: 18px;
}

.location span {
  margin-right: 5px;
}

.date {
  font-size: 14px;
  opacity: 0.9;
  margin-top: 10px;
}

.weather-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.weather-icon {
  text-align: center;
}

.weather-icon i {
  font-size: 48px;
  display: block;
}

.weather-desc {
  font-size: 20px;
}

.temperature {
  text-align: right;
}

.current-temp {
  font-size: 48px;
  font-weight: bold;
}

.temp-unit {
  font-size: 24px;
  vertical-align: super;
}

.weather-footer {
  font-size: 10px;
  opacity: 0.7;
  display: flex;
  justify-content: space-between;
}
</style>
